import React from 'react';
import { connect } from 'dva';
import { message, Spin, Button } from 'antd';
import TableCop from '../components/TableCop';
class OrdersPage extends React.Component {
  init() {
    this.props.dispatch({
      type: 'orders/getOrders',
      paylaod: {
        success: () => {
          message.success('订单数据请求成功！');
          this.setState({ loading: false });
        },
        failed: () => {
          message.error('订单数据请求失败！');
          this.setState({ loading: true });
        }
      }
    });
  }
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }
    this.init();
  }
  render() {
    const { orders: { data } } = this.props;
    const columns = [
      {
        title: '单据编号',
        dataIndex: 'order_number',
      }, {
        title: '客户名称',
        dataIndex: 'customer_name',
      }, {
        title: '下单日期',
        dataIndex: 'order_time',
      }, {
        title: '应付金额',
        dataIndex: 'amount_payable',
      }, {
        title: '已付金额',
        dataIndex: 'amount_paid',
      }, {
        title: '备注',
        dataIndex: 'remark',
      }, {
        title: '操作',
        render: (record) => <div>
          <Button onClick={() => { this.handleEdit(record.order_number); }}>edit</Button>
          <Button onClick={() => { this.handleDelete(record.order_number); }}>delete</Button>
          <Button>detail</Button>
        </div>,
      }
    ];
    return (
      <div>
        {this.state.loading ?
          <Spin size="large" tip="Loading..." /> :
          <TableCop rowKey="order_number" columns={columns} dataSource={data} />
        }
      </div>
    );
  }
}

function mapStateToProps({ orders }) {
  return { orders };
}

export default connect(mapStateToProps)(OrdersPage);